<template>
  <div class="dance-music-menu">
    <div class="dance-music-menu-item">
      <div class="dance-music-menu-item-title">
        语种：
      </div>
      <b-menu
        class="item-menu"
        :menu="areas"
        item-height="30px"
        item-width="80px"
        :active-show-border="false"
        :active-color="getActiveColor"
        @click="hanleArea"
      ></b-menu>
    </div>
    <div class="dance-music-menu-item">
      <div class="dance-music-menu-item-title">
        分类：
      </div>
      <b-menu
        class="item-menu"
        :menu="types"
        item-height="30px"
        item-width="80px"
        :active-show-border="false"
        :active-color="getActiveColor"
        @click="handleType"
      ></b-menu>
    </div>
    <div class="dance-music-menu-item">
      <div class="dance-music-menu-item-title">
        排序：
      </div>
      <b-menu
        class="item-menu"
        :menu="orders"
        item-height="30px"
        item-width="80px"
        :active-show-border="false"
        :active-color="getActiveColor"
        @click="handleOrder"
      ></b-menu>
    </div>
  </div>
</template>
<script>
import { theme } from '../../../mixin/global/theme'
export default {
  mixins: [theme],
  data () {
    return {
      areas: ['全部', '内地', '港台', '欧美', '韩国', '日本'],
      types: ['全部', '官方版', '原声', '现场版', '网易出品'],
      orders: ['上升最快', '最热', '最新'],
      currentAreas: '全部',
      currentType: '全部',
      currentOrder: '上升最快'
    }
  },
  methods: {
    hanleArea (index) {
      //语种切换
      this.currentAreas = this.areas[index]
      //子传父
      this.$emit(
        'change',
        this.currentAreas,
        this.currentType,
        this.currentOrder
      )
    },
    handleType (index) {
      this.currentType = this.types[index]
      //子传父
      this.$emit(
        'change',
        this.currentAreas,
        this.currentType,
        this.currentOrder
      )
    },
    handleOrder (index) {
      this.currentOrder = this.orders[index]
      //子传父
      this.$emit(
        'change',
        this.currentAreas,
        this.currentType,
        this.currentOrder
      )
    }
  },
  computed: {}
}
</script>
<style lang="less">
.dance-music-menu {
  &-item {
    margin: 5px 0;
    padding-left: 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    &-title {
      white-space: nowrap;
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        display: inline-block;
        background: #8f9096;
        padding: 3px 5px;
        border-radius: 4px;
      }
    }
  }
  .item-menu {
    width: calc(100% - 80px);
  }
}
</style>
